<template>
  <div class="img-wrapper">
    <template v-if="!isError">
      <img :src="src" alt="" @error="handleError" v-bind="$attrs" :class="customClass" />
    </template>
    <slot name="error" v-else>
      <img :src="imgPlaceholder" alt="" :class="customClass" />
    </slot>
  </div>
</template>

<script>
export default {
  name: 't-img',
  props: {
    src: {
      type: String
    },
    customClass: {
      type: String
    },
    defImg: { type: String }
  },
  data() {
    return {
      isError: false
    }
  },
  computed: {
    imgPlaceholder() {
      return this.defImg ? this.defImg : require('@/assets/img/book-default.gif')
    }
  },
  methods: {
    handleError(e) {
      this.isError = true
    }
  }
}
</script>

<style lang="scss" scoped></style>
